<template>
  <el-tabs v-model="activeName" type="border-card">
    <el-tab-pane label="调拨信息" name="first">
      <el-table
              :data="td.IOTableData"
              border stripe
              style="width: 100%"
              :cell-style="{textAlign: 'center'}"
              :header-cell-style="{textAlign: 'center'}"
      >
        <el-table-column prop="lsh" label="流水号" width="110"/>
        <el-table-column prop="zcbh" label="资产编号" width="110"/>
        <el-table-column prop="zcmc" label="资产名称"/>
        <el-table-column prop="dbsl" label="调拨数量" width="90"/>
        <el-table-column label="调拨部门" width="180" :formatter="formatterMechanism"/>
        <el-table-column label="使用人" width="90" :formatter="formatterStaff"/>
        <el-table-column prop="dbrq" label="调拨日期" :formatter="formatDate"/>
        <el-table-column prop="ghrq" label="入库日期">
          <template #default="scope">
          <span v-if="scope.row.ghrq==null">
            <el-tag>暂未入库</el-tag>
          </span>
            <span v-else-if="scope.row.ghsl!==scope.row.dbsl">
            <el-tag type="warning">调拨进行中</el-tag>
          </span>
            <span v-else>
            {{ currencyFormatDate(scope.row.ghrq) }}
          </span>
          </template>
        </el-table-column>
        <el-table-column prop="ghsl" label="入库数量">
          <template #default="scope">
          <span v-if="scope.row.ghsl==null">
            <el-tag>暂未入库</el-tag>
          </span>
            <span v-else>
            {{ scope.row.ghsl }}
          </span>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="维修/报废信息" name="second">
      <el-table
              :data="td.FixTableData"
              border stripe
              style="width: 100%"
              :cell-style="{textAlign: 'center',lineHeight: '2'}"
              :header-cell-style="{textAlign: 'center'}"
      >
        <el-table-column prop="lsh" label="维修流水号" width="180"/>
        <el-table-column prop="tbrq" label="填报日期" width="130"/>
        <el-table-column prop="isScrapped" label="是否报废" width="130">
          <template #default="scope">
            <el-tag size="default" v-if="scope.row.isScrapped === 1" type="success" effect="dark">未报废</el-tag>
            <el-tag size="default" v-else-if="scope.row.isScrapped === 2" type="warning" effect="dark">已报废</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="zcbh" label="资产编号" width="115"/>
        <el-table-column prop="zcmc" label="资产名称" width="130"/>
        <el-table-column prop="shsl" label="损坏数量" width="90"/>
        <el-table-column prop="sxrq" label="送修日期" width="130" :formatter="formatDate"/>
        <el-table-column prop="gzyy" label="故障原因" width="130">
          <template #default="scope">
            <span v-if="scope.row.gzyy && scope.row.gzyy.length <= 15">{{ scope.row.gzyy }}</span>
            <el-popover
                    placement="top-start"
                    :content="scope.row.gzyy"
                    v-else-if="scope.row.gzyy && scope.row.gzyy.length>15"
            >
              <template #reference>
                {{ scope.row.gzyy.slice(0, 5) + "..." }}
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="wxzk" label="维修状况" width="130">
          <template #default="scope">
            <span v-if="scope.row.wxzk && scope.row.wxzk.length <= 15">{{ scope.row.wxzk }}</span>
            <el-popover
                    placement="top-start"
                    :content="scope.row.wxzk"
                    v-else-if="scope.row.wxzk && scope.row.wxzk.length>15"
            >
              <template #reference>
                {{ scope.row.wxzk.slice(0, 5) + "..." }}
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="wxfy" label="维修费用" width="100"/>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="折旧信息" name="third">
      <el-table
              :data="td.DepTableData"
              border stripe
              style="width: 100%"
              :cell-style="{textAlign: 'center',background:'#fff'}"
              :header-cell-style="{textAlign: 'center'}"
      >
        <el-table-column prop="zjsj" label="折旧时间" width="130" fixed :formatter="formatDate"/>
        <el-table-column prop="zcbh" label="资产编号" width="130" fixed/>
        <el-table-column prop="zcmc" label="资产名称" width="130"/>
        <el-table-column label="资产类别" width="120" :formatter="formatAssetType"/>
        <el-table-column prop="zjff" label="折旧方法" width="120"/>
        <el-table-column prop="zjnx" label="折旧年限" width="100"/>
        <el-table-column prop="yuanzhi" label="原值" width="100"/>
        <el-table-column prop="jingzhi" label="净值" width="100"/>
        <el-table-column prop="canzhi" label="残值" width="100"/>
        <el-table-column prop="canzhilv" label="残值率" width="100"/>
        <el-table-column prop="rksj" label="入库时间" width="130" :formatter="formatDate"/>
        <el-table-column prop="shsj" label="损坏时间" width="130" :formatter="formatDate"/>
        <el-table-column prop="zjje" label="折旧金额" width="100"/>
      </el-table>
    </el-tab-pane>
<!--    <el-tab-pane label="文件操作" name="fourth">-->

<!--    </el-tab-pane>-->
  </el-tabs>
</template>

<script setup>
import { ref, watch } from 'vue'
import request from "@/util/request";
import moment from "moment";
import { Edit, List, Memo } from "@element-plus/icons-vue";

const activeName = ref('first');

/**
 *对话框属性初始化
 */
const props = defineProps(
    {
      id: {
        type: Number,
        default: -1,
        required: true
      },
    }
)

const td = ref({
  IOTableData: [],
  FixTableData: [],
  DepTableData: [],
})

watch(
    () => props.id,
    (value) => {
      if (value !== -1) {
        console.log(value);
        initDetails(value)
      }
    }
)

const initDetails = async (id) => {
  const res = await request.post("assetCheck/details/" + id);
  console.log(res.data)
  td.value.IOTableData = res.data.assetAllocateList;
  td.value.FixTableData = res.data.assetFixList;
  td.value.DepTableData = res.data.assetDepreciationList;
}

const formatterMechanism = (row) => {
  return row.mechanism.name
}

const formatterStaff = (row) => {
  return row.staff2.name
}

const formatAssetType = (row) => {
  return row.assetType.name
}

const formatDate = (row, column) => {
  let date = row[column.property];
  if (date === undefined) {
    return "";
  }
  return moment(date).format("YYYY/MM/DD");
}
</script>

<style lang="scss" scoped>
</style>